import styles from './index.module.scss';

interface Props {
  topText?: string;
  bottomText?: string;
  progress: number;
}


export function Progress(props: Props) {
  return (
    <div className={styles["progress-wrap"]}>
      {props.topText && <div className={styles['top-text']}>{props.topText}</div>}
      <div className={styles["progress-bar"]}>
        <div className={styles["progress-bar-inner"]} style={{ width: props.progress + "%" }}></div>
      </div>
      {props.bottomText && <span className={styles["bottom-text"]}>{props.bottomText}</span>}
    </div>
  );
}